<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser XML test</title>

    <!-- Mocha CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/10.2.0/mocha.min.css">

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .test-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="test-container">
        <h1>Browser XML test</h1>

        <!-- Mocha test results will be displayed here -->
        <div id="mocha"></div>
    </div>

    <!-- Mocha and Chai libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/10.2.0/mocha.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.10/chai.min.js"></script>

    <script>
        // Wait for libraries to load
        window.addEventListener('DOMContentLoaded', function () {
            // Setup Mocha
            mocha.setup('bdd');
            
            // Make assert globally available
            window.assert = chai.assert;

            // Function to dynamically load multiple scripts sequentially
            function loadScript(...sources) {
                return sources.reduce((promise, src) => {
                    return promise.then(() => {
                        return new Promise((resolve, reject) => {
                            const script = document.createElement('script');
                            script.src = src;
                            script.onload = resolve;
                            script.onerror = reject;
                            document.head.appendChild(script);
                        });
                    });
                }, Promise.resolve());
            }

            // Function to run tests
            function runTests() {
                // Clear previous results
                document.getElementById('mocha').innerHTML = '';

                // Run the tests
                mocha.run();
            }

            // Load test scripts and then run tests
            loadScript('xml_test.js', 'querySelector_test.js')
                .then(() => {
                    console.log('Test scripts loaded successfully');
                    // Auto-run tests after scripts are loaded
                    runTests();
                })
                .catch((error) => {
                    console.error('Failed to load test scripts:', error);
                });

        }); // End of DOMContentLoaded event listener
    </script>
</body>

</html>